<template>
	<view class="global">
		<view class="formBox">
			<text>注册</text>
			<form>
				<input class="inputBox" type="text" placeholder="邮箱" v-model="email" />
				<input class="inputBox" type="text" placeholder="电话" v-model="tel" />
				<input class="inputBox" type="text" placeholder="账号" v-model="username" />
				<input class="inputBox" type="password" placeholder="密码" v-model="password" />
				<input class="inputBox" type="password" placeholder="确认密码" v-model="rePassword" />
				<button class="btn" @click="register">注册</button>
			</form>
		</view>
		<view class="loginBox" @click="goLogin('login')">
			<text>去登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				email: '',
				tel: '',
				username: '',
				password: '',
				rePassword: ''
			}
		},
		methods: {
			submit(){
				console.log("-----添加用户-----");
				uniCloud.callFunction({
				  name: 'addUser', // 云函数名称
				  data: this.form, // 传递的数据（表单内容）
				  success: (e) => {
				    console.log(e.result); // 打印返回结果
				    uni.showToast({
				      title: '添加成功',
				      duration: 2000
				    });
				  }
				});
			},
			register() {
				if (!this.email) {
					uni.showToast({
						title: '请输入邮箱',
						icon: 'none'
					});
					return;
				}
				if (!this.tel) {
					uni.showToast({
						title: '请输入电话',
						icon: 'none'
					});
					return;
				}
				if (!this.username) {
					uni.showToast({
						title: '请输入账号',
						icon: 'none'
					});
					return;
				}
				if (!this.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				if (!this.rePassword) {
					uni.showToast({
						title: '请确认密码',
						icon: 'none'
					});
					return;
				}
				if (this.password.length < 6) {
					uni.showToast({
						title: '密码长度不能少于6位',
						icon: 'none'
					});
					return;
				}
				if (this.password !== this.rePassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					});
					return;
				}
				uni.showToast({
					title: '注册成功,请登录！',
					icon: 'success',
					duration: 500
				});
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/login/login'
					});
				}, 500);
			},
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		}
	}
</script>

<style>
	.global {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background-color: #f5f7fa;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.formBox {
		background-color: #ffffff;
		padding: 40rpx;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		width: 100%;
		max-width: 500rpx;
		box-sizing: border-box;
	}

	.formBox text {
		display: block;
		text-align: center;
		font-size: 28rpx;
		margin-bottom: 15rpx;
		font-weight: bold;
	}

	.inputBox {
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #f9f9f9;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		box-sizing: border-box;
	}

	.btn {
		width: 100%;
		height: 80rpx;
		background-color: #007AFF;
		color: #ffffff;
		border: none;
		border-radius: 10rpx;
		font-size: 28rpx;
	}

	.loginBox {
		margin-top: 30rpx;
		color: #007aff;
		font-size: 28rpx;
	}
</style>